<template>
  <a-modal
    v-model="visible"
    title="新增报名用户"
    destroyOnClose
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    centered
    @ok="submit"
    :afterClose="afterClose"
  >
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="姓名" prop="personName">
        <a-auto-complete
          v-model="form.personName"
          class="global-search"
          size="large"
          style="width: 100%"
          placeholder="请输入姓名"
          option-label-prop="title"
          @select="handleChange"
          @search="handleSearch"
        >
          <template slot="dataSource">
            <a-select-option v-for="item in options" :key="item.id" :value="item.id" :title="item.leadingName">
              {{ item.leadingName }}
            </a-select-option>
          </template>
          <a-input>
            <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large" type="primary">
              <a-icon type="search" />
            </a-button>
          </a-input>
        </a-auto-complete>
      </a-form-model-item>
      <a-form-model-item label="手机号码" prop="phonenumber">
        <a-input v-model="form.phonenumber" :disabled="disabledPhone" />
      </a-form-model-item>
      <a-form-model-item label="单位名称" prop="companyName">
        <a-input v-model="form.companyName" />
      </a-form-model-item>
      <a-form-model-item label="单位职务" prop="companyPosition">
        <a-input v-model="form.companyPosition" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { queryNotRegistration, addActivityRegister } from '@/api/activity/activity'
export default {
  props: {
    // 活动ID
    activityId: {
      type: Number | String,
    },
    //报名人信息
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      form: {
        personName: undefined,
        phonenumber: undefined,
        companyName: undefined,
        companyPosition: undefined,
      },
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
      },
      options: [],
      confirmLoading: false,
    }
  },
  computed: {
    disabled() {
      let { identity, userId } = this.rowData
      return identity || userId
    },
    disabledName() {
      let { personName } = this.rowData
      return this.disabled && personName
    },
    disabledPhone() {
      let { personTel } = this.rowData
      return this.disabled && personTel
    },
  },
  methods: {
    openModel() {
      this.visible = true
    },
    closeModel() {
      this.visible = false
    },
    afterClose() {
      this.$refs.form.resetFields()
      this.options = []
    },
    async handleSearch(e) {
      let res = await queryNotRegistration({
        current: 1,
        pageSize: 10,
        activityId: this.activityId,
        leadingName: e,
      })
      this.options = (res.data.records || []).map((item) => {
        return {
          ...item,
          id: item.id && item.id.toString(),
        }
      })
    },
    handleChange(e) {
      let item = this.options.find((f) => f.id === e)
      Object.keys(this.form).forEach((k) => {
        this.form[k] = item[k]
      })
      this.form.personName = item.leadingName
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          try {
            let res = await addActivityRegister({ ...this.form, activityId: this.activityId })
            this.confirmLoading = false
            if (res.code === 0) {
              this.$message.success(`新增成功`)
              this.closeModel()
              console.log(JSON.parse(JSON.stringify(res.data)))
              this.$emit('success', res.data)
            }
          } catch (error) {
            this.confirmLoading = false
          }
        }
      })
    },
  },
}
</script>

<style></style>
